<!--
 * @Author: zouyaoji@https://github.com/zouyaoji
 * @Date: 2021-07-05 11:03:29
 * @LastEditTime: 2022-02-13 00:15:24
 * @LastEditors: zouyaoji
 * @Description:
 * @FilePath: \vue-cesium-starter\src\views\Home.vue
-->
<template>
   <div class="home viewer">
     <vc-viewer ref="homes">
       <!-- 瓦片配置 -->
       <vc-layer-imagery @ready="ready" :alpha="1" :brightness="1" :contrast="1" :sort-order="10">
         <vc-imagery-provider-urltemplate ref="provider" :projection-transforms="projectionTransforms"
           url="http://192.168.2.143:7026/roadmap/{z}/{x}/{y}.png"></vc-imagery-provider-urltemplate>
       </vc-layer-imagery>
       <!-- 导航菜单 和经纬度菜单 -->
       <!-- <vc-navigation></vc-navigation> -->
       <!-- 量测工具 -->
       <vc-measurements :offset="[10, 65]" :mainFabOpts="mainFabOpts"></vc-measurements>
       <!-- 绘制工具 -->
       <!-- 修改定位 和 位置偏移 -->
       <vc-drawings ref="drawingsRef" position="top-left" :main-fab-opts="mainFabOpts" :offset="[10, 65]" :editable="false"
         :clamp-to-ground="clampToGround" @draw-evt="drawEvt" @active-evt="activeEvt" @editor-evt="editorEvt"
         @mouse-evt="mouseEvt" @clear-evt="clearEvt" @ready="drawingsReadyDefault" :pin-drawing-opts="pinDrawingOpts"
         :point-drawing-opts="pointDrawingOpts" :polygon-drawing-opts="polygonDrawingOpts"
         :polyline-drawing-opts="polylineDrawingOpts" :regular-drawing-opts="regularDrawingOpts"></vc-drawings>
       <!-- 阴影图元集合 -->
       <vc-collection-primitive :polygons="polygons"></vc-collection-primitive>
       <!-- 图片图元集合 -->
       <vc-collection-primitive :show="true" ref="collectionRef">
         <!-- 图片图元 -->
         <vc-collection-billboard :billboards="billboards"></vc-collection-billboard>
       </vc-collection-primitive>
       <!-- 标题图元 -->
       <vc-collection-label @click="onClicked" ref="collectionRef" :labels="labels" @mouseout="onMouseout"
         @mouseover="onMouseover">
         <vc-label :position="{ lng: 105.24884033203125, lat: 25.313117980957031, height: 1183.3186645507812 }"
           text="'面积㎡'"></vc-label>
       </vc-collection-label>
       <!-- 球上插入html代码 -->
       <vc-overlay-html ref="html" :position="[117.186419, 45.66446, 20]" :show="true">
         <div class="vc-box">
           <div>aa</div>
           <el-button type="primary">Primary</el-button>
           <Pie></Pie>
         </div>
       </vc-overlay-html>
     </vc-viewer>
     <Line class="line"></Line>
     <!-- <Pie v-show="isSHow" class="pie"></Pie> -->
 
   </div>
 </template>
 
 <script name="Notice">
 import Line from '@/components/echarts/line.vue'
 import Pie from '@/components/echarts/pie.vue'
 import { ref, reactive } from 'vue'
 export default {
   setup() {
     let ellipsoid = ref(null);
     let left = ref("0px")
     let top = ref("0px")
     let isSHow = ref(false)
     let pinDrawingOpts = reactive({
       billboardOpts: {
         image:new URL(`@/assets/logo/logo.png`, import.meta.url).href,
         // image: require('../../../assets/logo/logo.png'),
         scale: 0.1,
         onClick(e) {
           console.log("????", ellipsoid);
           console.log('123', e)
           //显示echarts图
           top.value = e.windowPosition.y + 'px'
           left.value = e.windowPosition.x + 'px'
           isSHow.value = true;
           //获取经纬度
           const ellipsoids = ellipsoid.value.scene.globe.ellipsoid;
           const cartographic = ellipsoids.cartesianToCartographic(e.surfacePosition);
           const lat = Cesium.Math.toDegrees(cartographic.latitude);
           const lng = Cesium.Math.toDegrees(cartographic.longitude);
           const alt = cartographic.height;
           console.log(lat, lng, alt);
         }
       }
     })
     const ready = ({ Cesium, viewer }) => {
       ellipsoid.value = viewer;
       //cesium 原生 定位中心点
       console.log(Cesium, viewer);
       const center = Cesium.Cartesian3.fromDegrees(120.313423, 36.064599, 9000);
       const centerX = center.x;
       const centerY = center.y;
       const centerZ = center.z;
       viewer.camera.flyTo({ //设置为北京上空
         destination: {
           x: centerX,
           y: centerY,
           z: centerZ
         },
         orientation: {
           heading: 0.3884413259732771, //旋转角 正东为90°
           pitch: Cesium.Math.toRadians(-90), //俯仰角，水平为0°
           roll: 0.0014112073156402616//翻滚角
         },
         duration: 2,
       });
     }
 
     return { left, top, isSHow, pinDrawingOpts, ready }
   },
   name: 'Home',
   components: {
     Line,
     Pie
   },
   data() {
     return {
       appearance: null,
       //图片图元集合
       billboards: [
         {
           position: { lng: 101.120214, lat: 35.528280 },
           image:new URL(`@/assets/logo/logo.png`, import.meta.url).href,
           scale: 0.08
         },
         {
           position: { lng: 104.874204, lat: 34.009005 },
           image: "https://zouyaoji.top/vue-cesium/favicon.png",
           scale: 0.08
         },
         {
           position: { lng: 110.545065, lat: 33.331457 },
           image: "https://zouyaoji.top/vue-cesium/favicon.png",
           scale: 0.08
         },
         {
           position: { lng: 108.113184, lat: 31.109641 },
           image: "https://zouyaoji.top/vue-cesium/favicon.png",
           scale: 0.08
         },
         {
           position: { lng: 102.829895, lat: 31.329178 },
           image: "https://zouyaoji.top/vue-cesium/favicon.png",
           scale: 0.08
         },
         {
           position: { lng: 95.943003, lat: 31.242175 },
           image: "https://zouyaoji.top/vue-cesium/favicon.png",
           scale: 0.08
         }
       ],
       //多边形图元集合
       polygons: [
         {
           positions: [
             [97.376306, 39.831527],
             [98.917590, 36.237017],
             [93.848502, 29.940172],
             [104.487913, 27.953993],
             [115.220089, 31.167971],
             [112.139621, 35.073639],
             [105.265513, 35.478903]
           ],
           appearance: {
             type: 'MaterialAppearance',
             options: {
               material: '#1963d269'
             }
           }
         },
       ],
       //瓦片配置
       projectionTransforms: {
         from: 'GCJ02',
         to: 'WGS84'
       },
       //展开反向
       mainFabOpts: {
         direction: 'right'
       },
       addTerrain: false,
       editable: false,
       clampToGround: false,
       polylineDrawingOpts: {
         // loop: true,
         onClick(e) {
           console.log(e)
         }
       },
       rectangleDrawingOpts: {
         regular: false
       },
       // pinDrawingOpts: {
       //   billboardOpts: {
       //     image: require('@/assets/logo.png'),
       //     scale: 0.1,
       //     onClick(e) {
       //       console.log('123', e.windowPosition)
       //       this.top = e.windowPosition.top
       //       this.left = e.windowPosition.left
       //       this.isSHow = true;
       //     }
       //   },
       //   // labelOpts: {
       //   //   text: '图标点',
       //   //   pixelOffset: [0, -30],
       //   //   onClick(e) {
       //   //     console.log(e)
       //   //   }
       //   // }
       // },
       pointDrawingOpts: {
         preRenderDatas: [
 
         ],
         pointOpts: {
           color: 'green',
           onClick(e) {
             console.log(e)
           }
         }
       },
       polygonDrawingOpts: {
         //默认绘制 
         preRenderDatas: []
       },
       regularDrawingOpts: {
         preRenderDatas: [
           []
         ],
         onClick(e) {
           console.log(e)
         }
       }
     }
   },
   methods: {
 
     drawingsReadyDefault({ Cesium, viewer, cesiumObject }) {
       console.log('绘制选项参数：', cesiumObject)
       window.vm = this
       window.viewer = viewer
       console.log();
     },
     clear() {
       this.$refs.drawingsCustomRef.clearAll()
     },
     toggle(drawingActionInstance) {
       this.$refs.drawingsCustomRef.toggleAction(drawingActionInstance.name)
     },
     onTilesetReady(tileset, viewer) {
       const cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center)
       const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height)
       const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 5)
       const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())
       tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
       viewer.zoomTo(tileset)
       viewer.scene.globe.depthTestAgainstTerrain = true
       this.restoreCursorMove = 'auto'
       this.drawing = false
     },
     drawEvt(e, viewer) {
       if (e.finished) {
         if (e.type === 'move') {
           viewer.canvas.setAttribute('style', `cursor: ${this.restoreCursorMove}`)
         }
         this.drawing = false
       } else {
         this.drawing = true
         if (e.type === 'move') {
           viewer.canvas.setAttribute('style', 'cursor: move')
         }
         if (e.type === 'new') {
           viewer.canvas.setAttribute('style', 'cursor: crosshair')
         }
       }
     },
     activeEvt(e, viewer) {
       console.log(e)
       viewer.canvas.setAttribute('style', `cursor: ${e.isActive ? 'crosshair' : 'auto'}`)
       if (!e.isActive) {
         this.drawing = false
         this.restoreCursorMove = 'auto'
       }
     },
     editorEvt(e, viewer) {
       if (e.type === 'move') {
         viewer.canvas.setAttribute('style', 'cursor: move')
         this.drawing = true
       } else {
         viewer.canvas.setAttribute('style', 'cursor: auto')
       }
     },
     mouseEvt(e, viewer) {
       const restoreCursor = getComputedStyle(viewer.canvas).cursor
       if (!this.drawing) {
         console.log(e)
         if (e.type === 'onmouseover') {
           this.restoreCursorMove = restoreCursor
           viewer.canvas.setAttribute('style', 'cursor: pointer')
         } else {
           viewer.canvas.setAttribute('style', `cursor: ${this.restoreCursorMove || 'auto'}`)
         }
       }
     },
     clearEvt(e, viewer) {
       console.log(e)
     },
     unload() {
       this.$refs.drawingsRef.unload()
     },
     load() {
       this.$refs.drawingsRef.load()
     },
     reload() {
       this.$refs.drawingsRef.reload()
     },
     pickEvt(e) {
       console.log(e)
     }
   }
 }
 </script>
 <style >
 .viewer {
   height: 100vh;
 }
 
 .line {
   position: absolute;
   top: 150px;
   left: 30px;
   color: #ffffff;
 
 }
 

 </style>
 